<template id="card-wrapper">
  <style>
    :host {
      display: block;
    }
  </style>
  <card-component exportparts="base, header, body">
    <slot name="H" slot="header_slot"></slot>
    <slot name="B" slot="body_slot"></slot>
    <slot name="F" slot="footer_slot"></slot>
  </card-component>
</template>

<script type="module">
  customElements.define(
    "card-wrapper",
    class extends HTMLElement {
      constructor() {
        super(); // 在构造函数中总是先调用 super
        const cardWrapper = document.getElementById("card-wrapper").content;
        const shadowRoot = this.attachShadow({
          mode: "open",
        });
        shadowRoot.appendChild(cardWrapper.cloneNode(true));
      }
    },
  );
</script>